<template>
  <div class="school-card-list-box flex-col-start">
    <div class="school-card-list-body">
      <!--      空内容时-->
      <div v-if="pageOption.size<1" class="flex-row-center" style="width: 100%">
        <el-empty :image-size="200"></el-empty>
      </div>
      <!--      有内容-->
      <SchoolCard v-for="(item,index) in pageOption.list" v-else :key="item.id"
                  :school="item" class="school-item" @click="handleClickSchool(item)">

      </SchoolCard>
    </div>
    <div class="school-card-list-page flex-row-center">
      <el-pagination
          :page-size="pageOption.pageSize"
          background
          @current-change="pageChange"
          layout="prev, pager, next"
          :total="pageOption.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SchoolCard from "@/components/school/SchoolCard.vue";

export default {
  name: "SchoolCardList",
  components: {SchoolCard},
  props: {
    route: {
      type: Boolean,
      default: true
    },
    pageOption: {
      type: Object,
      default: () => {
        return {
          hasNextPage: false,
          hasPreviousPage: false,
          list: [],
          pageNum: 1,

        }
      }
    }
  },
  data(){
    return{

    }
  },
  methods: {
    pageChange(page) {
      this.$emit("pageChange", page)
    },
    handleClickSchool(item) {
      if (this.route) {
        this.$router.push({
          path: `/index/animal`,
          query: {
            sid: item.id
          }
        })
      } else {
        this.$emit("click", item)
      }

    }
  }
}
</script>

<style scoped lang="less">
  .school-card-list-box{
    width: 100%;
    height: 100%;
    min-height: 500px;
    .school-card-list-body {
      width: 90%;
      flex: 8;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;

      .school-item {
        width: 150px;
        height: 50px;
        margin: 10px;
      }
    }
    .school-card-list-page{
      width: 100%;
      flex: 2;
    }
  }
</style>